<template>
  <a href='/pages/detail/main' class="item">
    <div >
      <img :src='data' class="good-cover"/>
      <div class="title">名称</div>
      <div class="title-flex-wrap">
        <div class="title-flex-item">剩余0件</div>
        <div class="title-flex-item align-right">200人浏览</div>
      </div>
      <div class="glod"><img src='/static/images/gold.png'/> 16+¥5<span class="del">¥0</span></div>
      <div class="collect title-flex-wrap">
        <div class="title-flex-item">
          <img src='/static/images/collect.png' class="collect-img">
          <span>收藏</span>
        </div>
        <div class="title-flex-item align-right">
          <span class="btn">兑换</span>
        </div>   
      </div>
    </div>
  </a>
  
</template>

<script>
export default {
  props: ["data"]
};
</script>

<style>
.item {
  flex: 1;
  margin: 5px;
  padding: 8px;
  font-size: 10px;
  box-shadow: 1px 1px 1px rgba(50,50,50,0.4);
  color: rgb(162,162,162)
}
.good-cover {
  min-width: 100px;
  max-width: 150px;
  height: 150px;
}
.item .title {
  color: rgb(50,50,50);
  font-size: 14px;
  text-overflow:ellipsis;
}
.title-flex-wrap {
  display: flex;
}
.title-flex-item {
  flex: 1
}
.align-right {
  text-align: right
}
.glod {
  color: rgb(213,150,18);
  font-size: 14px;
}
.glod img {
  width: 12px;
  height: 12px;
}
.del {
  text-decoration: line-through;
  color: rgb(160,160,160);
  font-size: 10px;
  margin-left: 5px;
}
.collect {
  font-size: 14px;
}
.collect-img {
  width: 16px;
  height: 16px;
}
.collect .btn {
  padding: 5px 20px;
  background: red;
  color: #ffffff
}
</style>
